import React, {useEffect, useState} from 'react';
import {Header} from "antd/es/layout/layout";
import {MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined} from "@ant-design/icons";
import {Avatar, Dropdown, Menu, Space} from "antd";
import {useNavigate} from "react-router-dom";
import {changeCollapsed} from "../../redux/action/sandBoxAction";
import {connect} from "react-redux";
import {clearUserInfo} from "../../redux/action/userInfoAction";

const TopHeader = (props) => {
  // const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  // collapsed取反
  const collapsedHandler = () => {
    // store.dispatch(changeCollapsed())
    props.changeCollapsed();
  }

  // useEffect(() => {
  //   store.subscribe(() => {
  //     setCollapsed(store.getState().sandBox.collapsed)
  //   })
  // }, [])

  const logOut = () => {
    props.clearUserInfo();
    navigate("/login");
  }
  const menu = (
    <Menu
      items={[
        {
          key: '1',
          label: '超级管理员',
        },
        {
          key: '2',
          danger: true,
          label: '退出',
          onClick: logOut
        },
      ]}
    />
  );
  return (
    <Header
      className="site-layout-background"
      style={{
        padding: "0 16px",
      }}
    >
      {
        props.collapsed ?
          <MenuUnfoldOutlined
            className={"trigger"}
            onClick={collapsedHandler}
          />
          :
          <MenuFoldOutlined
            className={"trigger"}
            onClick={collapsedHandler}
          />
      }
      <div style={{float: "right"}}>
        <Dropdown overlay={menu}>
          <Space>
            欢迎admin回来
            <Avatar
              size="large"
              icon={<UserOutlined/>}
              alt={"图片资源错误"}
            />
          </Space>
        </Dropdown>
      </div>
    </Header>
  );
};

const mapStateToProps = (state) => {
  return {
    collapsed: state.sandBox.collapsed
  }
}

const mapDispatchToProps = {
  changeCollapsed,
  clearUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(TopHeader);